<template>
  <div class="option-group">
    <div class="option-item" v-for="(val, i) in arr" :key="i">
      <i
        class="icon iconfont"
        draggable="true"
        @dragstart="dragStart($event, i)"
        @dragover="dragOver($event, i)"
        @drop="drop($event, i)"
        @dragend="dragEnd($event, i)"
      >
        &#xe647;
      </i>
      <el-input class="value" :model-value="val" @input="inputValue($event, i)"></el-input>
      <el-button type="danger" @click="remove(i)" text circle>
        <i class="icon iconfont">&#xe718;</i>
      </el-button>
    </div>
    <el-button type="primary" text @click="add">添加选项</el-button>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
const emits = defineEmits(['update:modelValue', 'change:modelValue'])
const props = defineProps({
  modelValue: {
    type: Array as () => string[],
    default: () => []
  }
})
const arr = ref<string[]>([])
const dragIndex = ref<number | null>(null)
const hoverIndex = ref<number | null>(null)
const dragStart = (e: DragEvent, index: number) => {
  // console.log('dragStart', e, index)
  dragIndex.value = index
}
const dragOver = (e: DragEvent, index: number) => {
  e.preventDefault()
  // console.log('dragOver', e, index, dragIndex.value)
  hoverIndex.value = index
  if (dragIndex.value != null && dragIndex.value != index) {
    const move = arr.value[dragIndex.value]
    arr.value.splice(dragIndex.value, 1)
    arr.value.splice(index, 0, move)
    dragIndex.value = index
    arr.value = [...arr.value]
  }
}
const drop = (e: DragEvent, index: number) => {
  e.preventDefault()
  // console.log('drop', e, index, dragIndex.value)
  if (dragIndex.value != null && dragIndex.value != index) {
    const move = arr.value[dragIndex.value]
    arr.value.splice(dragIndex.value, 1)
    arr.value.splice(index, 0, move)
    dragIndex.value = index
    arr.value = [...arr.value]
  }
}
const dragEnd = (e: DragEvent, index: number) => {
  // console.log('dragEnd', e, index)
  // 这里可以添加拖拽结束后的处理逻辑，比如更新后端数据等
  emits('update:modelValue', arr.value)
  emits('change:modelValue', arr.value)
}
// 校验
const verify = (value: string, index: number) => {
  const optionIndex = arr.value.findIndex((el: string) => el === value)
  const option = arr.value.find((el: string) => el === value)
  if (option && optionIndex !== index) {
    ElMessage.error('输入选项重复')
    return false
  } else {
    return true
  }
}
// 输入
const inputValue = (value: string, index: number) => {
  if (verify(value, index)) {
    arr.value = arr.value.map((el, i) => {
      if (i === index) {
        el = value
      }
      return el
    })
  }
  emits('update:modelValue', arr.value)
  emits('change:modelValue', arr.value)
}
// 移除
const remove = (index: number) => {
  arr.value = arr.value.filter((el, i) => {
    return i !== index
  })
  emits('update:modelValue', arr.value)
  emits('change:modelValue', arr.value)
}
// 添加
const add = () => {
  arr.value.push('')
}
watch(props, () => {
  arr.value = JSON.parse(JSON.stringify(props.modelValue))
})
onMounted(() => {
  arr.value = JSON.parse(JSON.stringify(props.modelValue))
})
</script>

<style lang="scss" scoped>
.option-group {
  .option-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    i {
      cursor: move;
    }
    .value {
      width: 200px;
      margin: 0 10px;
    }
  }
}
</style>
